/* eslint-disable no-unused-vars */
import SideBar from './components/SideBar'
import Content from './components/Content'
import React, { useState } from 'react'
import Mask from './components/Mask'
import GlobalContext from './components/GlobalContext'
import { useTranslation } from 'react-i18next'

function App() {
  const [maskShow, setMaskShow] = useState(false)
  const { t, i18n } = useTranslation()

  const changeLanguage = (language) => {
    i18n.changeLanguage(language)
  }

  return (
    <>
      <GlobalContext.Provider
        value={{
          maskShow: maskShow,
          setMaskShow: setMaskShow,
          changeLanguage: changeLanguage,
          t: t
        }}
      >
        <div className="container">
          <div className="container-left">
            <SideBar></SideBar>
          </div>
          <div
            style={{
              width: '100%'
            }}
          >
            <Content></Content>
          </div>
        </div>
        <Mask maskShow={maskShow} />
      </GlobalContext.Provider>
    </>
  )
}

export default App
